<template>
  <div class="container">
    <h1>
      <span>项目架构及研发技术</span>
    </h1>
    <div class="content">
      <div class="l_side">
        <h1 style="border:none" id="1">1.系统架构图及简要说明</h1>
        <p style="text-align: center;">
          <img src="../../assets/images/system.jpg" alt />
        </p>
        <p style="text-align: center;">
          <strong>图&nbsp; 系统架构图</strong>
        </p>
        <p>
          系统采用
          <strong>Visual Studio 2010</strong> 作为开发平台，
          <strong>C#</strong> 作为开发语言搭建应用系统，整个系统开发过程包含以下几个过程：
        </p>
        <p>
          <strong>1).&nbsp;收集资料。</strong>大西安研究范围内地质资料的收集、分类和整理（包括基础地理数据、钻孔数据、地质剖面图、地裂缝数据、数据参数和图件的收集，整理及规范化处理等工作）。
        </p>
        <p>
          <strong>2).&nbsp;建库。</strong>依据数据库及其表结构设计成果建立数据库，数据入库。采用Access作为系统的后台数据库，各种形式的资料经过整理组织后统一入库。
        </p>
        <p>
          <strong>3).&nbsp;应用模型开发。</strong>应用模型的开发，系统的核心内容之一，其中包括对三维模型的构建算法的实现与集成。
        </p>
        <p>
          <strong>4).&nbsp;应用程序开发。</strong>系统应用程序开发，该阶段包括系统的需求分析、总体设计、详细设计以及代码编写四个阶段，主要实现对系统各模块的开发和集成工作，即在各模块相对独立开发、实现基础上，以组件形式将各模块加载到系统的主程序中，以形成功能完整、可靠稳定的系统应用程序。
        </p>
        <p>
          <strong>5).&nbsp;实验样本区建立。</strong>系统调试运行。该阶段已经完成了对系统的集成，本文以大西安数作为典型研究区域，使用研究范围内数据进行系统的测试、运行和用户体验，然后根据测试和用户的反馈意见，进一步对系统进行完善，以确保系统正常运行。
        </p>
        <h1 style="border:none" id="2">2.实验教学项目</h1>
        <table border="1" class="table">
          <tbody>
            <tr>
              <td style="width:300px;">
                <p style="text-align:left;">
                  <strong style="padding-left:5px;">开发技术</strong>（如：3D仿真、VR技术、AR技术、动画技术、WebGL技术、OpenGL技术等）
                </p>
              </td>
              <td style="width:400px;">
                <p>OpenGL技术、WebGL技术</p>
              </td>
            </tr>
            <tr>
              <td>
                <p style="text-align:left;">
                  <strong style="padding-left:5px;">开发工具</strong>（如：ArcGIS Engine
                  VIVE WAVE、Daydream 、Unity3d、Virtools、Cult3D、Visual Studio、Adobe Flash、百度VR内容展示SDK等）
                </p>
              </td>
              <td>
                <p>ArcGIS Engine10.1、Visual Studio 2010</p>
              </td>
            </tr>
          </tbody>
        </table>

        <h1 style="border:none" id="3">3.管理平台</h1>
        <table border="1" class="table">
          <tbody>
            <tr>
              <td style="width:300px;">
                <p style="text-align:left;">
                  <strong style="padding-left:5px;">开发语言</strong>（如：JAVA、.Net、PHP等）
                </p>
              </td>
              <td style="width:400px;">
                <p>.Net、JAVA</p>
              </td>
            </tr>
            <tr>
              <td>
                <p style="text-align:left;">
                  <strong style="padding-left:5px;">开发工具</strong>（如：Eclipse、Visual Studio、NetBeans、百度VR课堂SDK等）
                </p>
              </td>
              <td>
                <p>Eclipse、Visual Studio 2010</p>
              </td>
            </tr>
            <tr>
              <td>
                <p style="text-align:left;">
                  <strong style="padding-left:5px;">采用的数据库</strong>（如：HBASE、Mysql、SQL Server、Oracle等）
                </p>
              </td>
              <td>
                <p>Access、Mysql</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="r_side" id="r_side" :style="{active:isActive}">
        <div class="side_top">
          <div class="side-bar">
            <em class="circle start"></em>
            <em class="circle end"></em>
          </div>
          <div class="catalog-scroller">
            <dl class="catalog-list">
              <dt class="catalog-title level1">
                <em class="pointer"></em>
                <a href="#1" class="title-link">
                  <span class="text">
                    <span class="title-index">1</span>
                    <span class="title-link" title="系统架构图及简要说明">系统架构图及简...</span>
                  </span>
                </a>
              </dt>
              <dt class="catalog-title level2">
                <em class="pointer"></em>
                <a href="#2" class="title-link">
                  <span class="text">
                    <span class="title-index">2</span>
                    <span class="title-link" title="实验教学项目">实验教学项目</span>
                  </span>
                </a>
              </dt>
              <dt class="catalog-title level3">
                <em class="pointer"></em>
                <a href="#3" class="title-link">
                  <span class="text">
                    <span class="title-index">3</span>
                    <span class="title-link" title="管理平台">管理平台</span>
                  </span>
                </a>
              </dt>
            </dl>
          </div>
        </div>
        <div class="bottom-wrap">
          <i class="el-icon-arrow-up"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "technology",
  data() {
    return {
      isActive: false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop());
  },
  methods: {
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      console.log(scrollTop);
      if (scrollTop > 350) {
        this.isActive = true;
      }
    }
  }

};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  margin: 10px 0 95px;
  box-sizing: border-box;
  .active {
    display: fixed;
  }
  h1 {
    height: 48px;
    width:1123px;
    margin: 0 auto 30px;
    line-height: 48px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: 2px solid #d7d7d5;
    position: relative;
    span {
      position: absolute;
      left: 0;
      top: -2px;
      border-bottom: 2px solid #2fb7a1;
      color: #323335;
      font-weight: normal;
    }
  }
  .content {
    width: 1123px;
    margin: 0 auto;
    padding: 35px 40px 80px;
    background: #fff;
    box-shadow: 0 0 10px #ddd;
    min-height: 500px;
    display: flex;
    justify-content: space-between;
    .l_side {
      width: 790px;
      h1 {
        width: 100%;
        font-size: 16px;
        color: #333333;
        margin: 15px 0 20px;
        text-align: center;
      }
      p {
        line-height: 30px;
        color: #666;
        font-size: 12px;
        margin-bottom: 10px;
        text-indent: 2em;
      }
      .table {
        margin-bottom: 15px;
        p {
          line-height: 30px;
          color: #666;
          font-size: 12px;
          margin: 10px 0;
          text-indent: 0;
          text-align: center;
        }
      }
    }
    .r_side {
      width: 180px;
      height: 400px;
      margin-top: 100px;
      position: relative;
      .side_top {
        display: flex;
        justify-content: space-between;
        .side-bar {
          height: 105px;
          border-left: 2px solid #eaeaea;
          width: 5%;
          position: relative;
          .circle {
            display: block;
            width: 10px;
            height: 10px;
            border: 2px solid #eaeaea;
            border-radius: 50%;
          }
          .start {
            position: absolute;
            top: -8px;
            left: -6px;
          }
          .end {
            position: absolute;
            bottom: -8px;
            left: -6px;
          }
        }
        .catalog-scroller {
          // width: 95%;
          background-color: #d7d7d5;
          .catalog-list {
            width: 100%;
            margin: 10px 0;
            position: relative;
            .catalog-title {
              position: absolute;
              left: -160px;
            }
            .level2 {
              top: 30px;
            }
            .level3 {
              top: 60px;
            }
            .title-link {
              font-size: 14px;
              color: #555;
              font-weight: 700;
            }
            .title-index {
              color: #999;
              font-weight: 700;
              font-family: Arial;
              font-size: 14px;
              padding-right: 5px;
            }
            .pointer {
              display: block;
              width: 10px;
              height: 10px;
              background-color: #eaeaea;
              border: 2px solid #fff;
              border-radius: 50%;
              position: absolute;
              left: -24px;
              top: 8px;
            }
            .catalog-title:hover a {
              background-color: #eaeaea;
              border-bottom: 1px solid #ccc;
            }
            .catalog-title:hover .pointer {
              background-color: #409eff;
            }
          }
        }
      }
      .bottom-wrap {
        width: 45px;
        height: 45px;
        border-radius: 3px;
        background-color: #eaeaea;
        text-align: center;
        position: absolute;
        left: -2px;
        top: 125px;
        .el-icon-arrow-up {
          color: #fff;
          font-size: 36px;
          line-height: 45px;
        }
      }
    }
  }
}
</style>


